<template>
    <div id="list">
      <div class="back">
      
      </div>
        <div class="top">
            <div :class="{active:btnsIndex==index}" @click="changelist1(index)"
            v-for="(item,index) in text" :key="index">{{item.name}}</div>
        </div>
        <div class="item" >
          <div v-for="(item,index) in  (isShow?list:newlist)" :key="index">
            <img :src="item.picture" alt="">
         <span>
          <p>{{item.name}}</p>
          <p>￥{{item.min_price}}</p>
         </span>
          <button class="btn" @click=" change(item)">{{item.status==0?'马上抢':'已领取'}}</button>
          </div>
        </div>
    </div>
    
  </template>
  
  <script>
  
import axios from 'axios'
import {bbt_list} from '../api/api'
  export default {
    name: 'list',
    data(){
     return{
      btnsIndex:0,
      list:[],
      newlist:[],
      text:[{name:'正在抢购'},{name:'上新预告'}],
      isShow:false,
     }
    },
    props: {
      msg: String
    },
    methods: {
            change(item){
              console.log(item);
               item.status++
            },
            changelist1(index){
              console.log(index);
              this.btnsIndex=index
              if(this.btnsIndex==0){
                this.isShow=false
              }else{
                this.isShow=true
              }
            }, 
          
        }, 
    components:{

    },mounted(){

      bbt_list({params:{status:0}}).then((res)=>{
        this.list=res.data.list
        console.log(this.list);
      })
      ,bbt_list({params:{status:1}}).then((res)=>{
        res.data.list.map((item) =>{
        item.status=0
      });

        this.newlist=res.data.list
        console.log(this.newlist);
        
      })
    },
   
  }
  
  
  </script>
  
  <style scoped>
 
 .back{
    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.shengqianhuodong.com%2Fwp-content%2Fuploads%2F2019%2F12%2F1-1575626982.jpeg&refer=http%3A%2F%2Fwww.shengqianhuodong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672886744&t=25f17a57e964f7a7f0f4fea7d581be9b');
    background-size: 100% 100%;
    opacity: 0.8;
    height: 200px;
  }
  .back img{
    height: 200px;
    width: 200px;
  }
  .top{
    display: flex;
  }
  .top div{
    margin-left: 20px;
  }
  .item{
    height: 600px;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    padding: 10px;
    background-color: #F5F5F5;
  }
  .item div{
    width: 100%;
    height: 120px;
    background-color: white;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    position: relative;
    margin-bottom: 10px;
  }
  .item div img{
    width: 100px;
    height: 100px;
    border-radius: 10px;
  }
  .item div span{
    width: 125px;
    font-size: 12px;
  }
  .item div span p{
    margin-bottom: 60px;
  }
  .item div span p:nth-of-type(2){
    color: red;
    font-size: 16px;
  }
  .btn{
position: absolute;
right: 13px;
bottom: 17px;
background-color: red;
color: white;
border: 0;
width: 52px;
height: 28px;
border-radius: 20px;
  }
  .active{
    color: red;
  }
  .foot{
    position:fixed;
    bottom: 0%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: white;
    font-size: 14px;
  }
  .active{
    color: lightcoral;
  }
  .top{
margin: 10px 15px;
}
.center{
  display: flex;
  justify-content: space-around;
  font-size: 14px ;
  font-weight: bold;
  margin-bottom: 10px;
}

.bottom{
  height: 220px;
 overflow: auto;
}
.bottom div{
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px;
  background: white;
}
.bottom h5{
  height: 50px;
  width: 100px;
  margin-right: 20px;
}
.bottom p{
  font-size: 14px;
}
.bottom img{
  width: 80px;
  height: 80px;
}
  </style>
  